<template>
  <div ref="reportRef" class="month-summary-report">
    <report-time @reportTimeChange="reportTimeChange" @reportDown="reportDown" @lookTable="lookTable" />
    <reportTitle :report-time="reportTime" @inputSearchKey="inputSearchKey" />
    <reportTable ref="reportTableRef" :report-time="reportTime" :table-hight="tableHight" :input-search="inputSearch" />
  </div>
</template>

<script>
import reportTime from './compontents/reportTime';
import reportTable from './compontents/reportTable';
import reportTitle from './compontents/reportTitle';
export default {
  name: 'MonthSummaryReport',
  components: {
    reportTime,
    reportTable,
    reportTitle
  },
  data() {
    return {
      // reportTable: '',
      reportTime: '',
      tableHight: '',
      inputSearch: ''
    };
  },
  mounted() {
    this.tableHight = this.$refs.reportRef.offsetHeight - 40 - 50 - 30 - 30 + '';
  },
  methods: {
    reportTimeChange(time) {
      this.reportTime = time;
      this.inputSearch = '';
    },

    inputSearchKey(inputSearch) {
      this.inputSearch = inputSearch;
    },

    reportDown() {
      this.$refs.reportTableRef.reportDown();
    },

    lookTable() {
      this.$refs.reportTableRef.getTableHead();
    }
  }
};
</script>

<style lang="scss" scoped>
.month-summary-report{
  margin: 10px;
  background-color: #fff;
  padding: 5px 10px;
  height: calc(100% - 20px);
  box-sizing: border-box;
      border-radius: 5px;
  .report-time{
    padding: 10px 0 10px;
  }
}
</style>
